<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div{
	font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;font-size:12px;background:#fff;margin:1px;float:left;display:block;
}
div:hover{
	background:#CFF;
}
table{
	border-style:solid;
	border-color:#CFF
}
td{
	width: 15em;
	text-align: center;
}
p{
	font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;font-size:12px;
}
td:hover {
	background: #CFF;
}

</style>


</head>


<body>
<script src="processing-1.3.6.min.js"></script>
<script type="application/processing" data-processing-target="canvas1">

PImage bigImage;
String image_str = "";
int bs = 3; // this is our dot radius
float[] bx = new float[maxd];
float[] by = new float[maxd];

void setup() 
{
  for (int i=0; i<maxd; i++) { 
  	bx[i] = 0.0;
  	by[i] = 0.0;
  }
  bigImage = requestImage(cur_image);
  image_str = cur_image;
  size(352, 240);

  ellipseMode(CENTER_RADIUS);  
}
void draw() 
{ 
  updateSelf();
	//background(background_image);
  if (bigImage.width == 0) {
    // Image is not yet loaded
  } else if (bigImage.width == -1) {
    // This means an error occurred during image loading
  } else {
    // Image is ready to go, draw it
    background(bigImage);
  }
  //we'll draw dots on the coordinates passed in from our javascript

  	for (i=0; i<maxd;i++) {
		if(coordx[i]>0) {
			stroke(255);
			//colorMode(RGB,255);
			fillSeed(i);
			ellipse(coordx[i], coordy[i], bs, bs);
		}
	}

}
void updateSelf()
{
	String new_image_str = cur_image;
	if (new_image_str != image_str) {
		background(200);
		bigImage = requestImage(cur_image);
		image_str = cur_image;
		/*
		for (int i=0; i<10; i++) {
			bx[i] = coordx[i];
			by[i] = coordy[i];
		}
		*/
	}
}
void fillSeed(seed) {
	R = 123*seed%100+155;
	G = 456*seed%255;
	B = 789*seed%255;
	fill(R,G,B);
}
</script>


<script language="Javascript">
maxd = 50;
var last_clicked = "";
var cur_image = "http://amosweb.cse.wustl.edu/image/984/20091026_143750.jpg";
var coordx = new Array();
var coordy = new Array();

function plot(args) {
	document.getElementById("coord_text").innerHTML = " ";
	coordx = new Array();
	coordy = new Array();
	
	document.getElementById(args).style.background = "#CFF";
	if (last_clicked != "") {
		document.getElementById(last_clicked).style.background = "#FFF";
	}
	last_clicked = args;
	cur_image = "http://amosweb.cse.wustl.edu/image/984/".concat(last_clicked);

	document.getElementById("image_text").innerHTML = "Current image: " + args; 
	
	var xmlHttp;
	xmlHttp=new XMLHttpRequest();
	
	xmlHttp.open("GET","getDetails.php?image="+args,true);
	
	xmlHttp.onreadystatechange=function()
	{
	  if(xmlHttp.readyState==4)
	  {
		var pElement=document.getElementById("details");
		pElement.innerHTML=xmlHttp.responseText;
	  }
	}
	
	xmlHttp.send(null);
	
}

function draw(args) {
	coordx = new Array();
	coordy = new Array();
	if (args == "") {
		document.getElementById("coord_text").innerHTML = " ";
		return;
	}
	document.getElementById("coord_text").innerHTML = "Plotted coordinates: " + args;
	args_array=args.split(" ");
	for (i=0;i<(args_array.length);i++) {
		this_coord = args_array[i].split(",");
		coordx[i] = this_coord[0];
		coordy[i] = this_coord[1];
	}
	
}
	
function loading() {
	document.getElementById("loading").style.visibility = "visible";
}

function notloading() {
	document.getElementById("loading").style.visibility = "hidden";
}


function list() {
	input = document.getElementById("filter").value;
	
	var xmlHttp;
	xmlHttp=new XMLHttpRequest();
	
	xmlHttp.open("GET","listImages2.php?q="+escape(input),true);
	
	xmlHttp.onreadystatechange=function()
	{
	  if(xmlHttp.readyState==4)
	  {
		var pElement=document.getElementById("listing");
		pElement.innerHTML=xmlHttp.responseText;
	  }
	}
	
	xmlHttp.send(null);
}
</script>

<div style="text-align:center">

<canvas id="canvas1"> </canvas></div>



<p id="details"></p>
<div id="coord_text" style="float:none;"> </div>

<div>

<p id="image_text"></p><br />
<input type="text" id="filter" name="filter" value="" />
<button onclick="javascript:list()">Search</button>

</div>

<br />

<div id="listing"></div>
<script>
list(); // show everything at the start
</script>

</body></html>
